<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外出申请</title>
    <link rel="stylesheet" href="../../lib/font-awesome-4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="../../lib/element-ui/element-ui-2.8.2.css">


    <style>
        .el-input__count{

            position: relative;
            top: -34px;
            left: 90%;

        }

    </style>
</head>
<body>
<div id="app" v-loading="loading">


    <el-row type="flex" justify="space-around">

        <el-col :span=10>

            <el-form label-width="100px" label-position="right" :ref="form">

                <el-form-item label="项目名称" prop="name">
                    <el-input
                            v-model="form.projectName"
                            type="text"
                            clearable
                    ></el-input>
                </el-form-item>

                <el-form-item label="预计时间" >

                    <el-date-picker
                            v-model="form.time"
                            type="monthrange"
                            range-separator="至"
                            start-placeholder="开始年月"
                            end-placeholder="结束年月">
                    </el-date-picker>

                </el-form-item >

                <el-form-item label="人天" prop="duration">

                    <el-slider
                            v-model="form.manDay"
                            :step="1"
                            :max="1000"
                            show-input
                            show-input-controls
                            input-size="mini"
                    >
                    </el-slider>
                </el-form-item>

                <el-form-item label="预算(万元)" prop="duration">

                    <el-slider
                            v-model="form.expenses"
                            :step="1"
                            :max="1000"
                            show-input
                            show-input-controls
                            input-size="mini"
                    >
                    </el-slider>
                </el-form-item>


                <el-form-item label="备注" prop="desc">

                    <el-input type="textarea"
                              v-model="form.desc"
                              placeholder="项目说明"
                              :rows=10
                              minlength="3"
                              maxlength="100"
                              show-word-limit
                    ></el-input>

                </el-form-item>

                <el-form-item>
                    <el-button type="primary" round @click="submitApply">提交</el-button>
                    <el-button type="danger" round @click="resetForm">重置</el-button>
                </el-form-item>
            </el-form>

        </el-col>
        <el-col :span=10>
            <el-transfer v-model="form.reviewer"
                         :data="reviewerList"
                         filterable
                         :titles=['审核人列表','已选审核人']
            ></el-transfer>

        </el-col>
    </el-row>


</div>
</body>
</html>
<script src="../../lib/jQuery-3.31/jquery-3.3.1.js"></script>
<script src="../../lib/layui-2.4.5/layui.all.js"></script>
<script src="../../lib/vue/vue.js"></script>
<script src="../../lib/element-ui/elementUI-2.8.2.js"></script>



<script>

    const app = new Vue({

        el: "#app",

        data: {

            form: {
                projectName: '',

                province:'',
                time:'',
                manDay: 0,
                desc: '',
                reviewer: [],
                expenses:''

            },
            loading: false,
            reviewerList: [],
            provinceOptions:[],
            citiesOptions: []
        },

        methods: {



            /**
             * 提交
             *
             **/

            submitApply: function () {





                $.ajax({

                    url: '/project/applyproject',
                    type: 'get',
                    dataType: 'json',
                    data: {
                        'projectName': app.form.projectName,
                        'planStartTime':app.form.time[0],
                        'planEndTime': app.form.time[1],
                        'duration': app.form.duration + '天',
                        'planExpenses': app.form.expenses+'万元',
                        'projectDesc': app.form.desc,
                        'reviewerId': app.form.reviewer[0],
                        'manDay': app.form.manDay,
                    },

                    beforeSend: function(){

                        app.loading = true
                    },
                    success: function (result) {

                        if (result.success === true){

                            app.$notify.success({
                                title: '成功',
                                message: result.msg,
                            });
                            app.loading = false;

                        }else {
                            app.$notify.error({
                                title: '失败',
                                message: result.msg,
                            });
                            app.loading = false;

                        }

                    }

                })

            },


            /**
             * 重置
             * @param formName
             */
            resetForm: function() {

                this.form.projectName = '',
                this.form.time='';
                this.form.duration = 0;
                this.form.desc= '';
                this.form.reviewer=[];


            },
            // /**
            //  * 计算日期差
            //  */
            // computeDate: function(){
            //
            //     let startMon = this.form.time[0].getMonth() +1;
            //     let endMon = this.form.time[1].getMonth() +1 ;
            //     let startDay = this.form.time[0].getDate();
            //     let endDay = this.form.time[1].getDate();
            //
            //     if (startMon === endMon){
            //
            //         let days = endDay - startDay;
            //         app.form.duration = days;
            //     }else if (endMon - startMon === 1) { //相差一个月
            //
            //         let monCountDays= new Date(app.form.time[0].getFullYear(),startMon,0).getDate();//获得月份总天数
            //         let days = monCountDays-startDay+endDay;
            //         app.form.duration = days;
            //     }
            // }

        },
        created: function () {
            $.ajax({

                url: '/const/getDeptManager',
                type: 'get',
                dataType: 'json',
                success: function (result) {

                    if (result.success === true) {
                        // app.reviewerList = result.data;

                        for (let data of result.data) {

                            app.reviewerList.push({
                                key: data.userId,
                                label: data.name

                            })
                        }
                    }

                }


            });

            $.ajax({

                url: '/const/getCurrentUsername',
                type: 'get',
                dataType: 'json',
                success: function (result) {

                    app.form.name = result.data;

                }
            });

        }


    })


</script>